<template id="userTemplate">
  <div id="daDiv" style="width: 100%;height: 80%;">

    <div id="divTwo"style="margin-top: 20px;margin-bottom: 20px;">
   <el-button class="el-icon-delete" style="margin-left: 30px;width: 8%" type="danger" @click="deleteChecked(tableChecked)">删除</el-button>

     <el-button type="primary" class="el-icon-edit" plain style="margin-left: 30px;width:9%" @click="addsaleOrders">添加订单</el-button>
      <el-input
          v-model="salesOrderId"
          placeholder="请输入订单"
          @clear="getMenuList"
          class="input-with-select"
          clearable
          style="width: 15%;margin-left: 50%"
      >
      </el-input>
      <el-button  icon="el-icon-search" type="primary" id="sele" style="margin-left: 10px" @click="getMenuList()">
        搜索

      </el-button>
    </div>
    <el-table :data="menuList" @selection-change="handleSelectionChange" border style="width: 100%;text-align: center;font-weight: bold;margin-top: 40px;border-left: none">
      <el-table-column type="selection" width="55" />
      <el-table-column label="销售订单号" prop="salesOrderId"/>
      <el-table-column label="销售数量" prop="salesOrderNum" />
      <el-table-column label="总计价格"  prop="totalDetails" />
      <el-table-column label="付款状态" prop="paymentState">
        <template #default="scope">
          <el-tag  type="success" plain v-if="scope.row.paymentState == 1">已支付</el-tag>
          <el-tag type="danger" v-else>未支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="仓库状态" prop="deliveryStatus">
        <template #default="scope">
          <el-tag type="success" plain v-if="scope.row.deliveryStatus == 1">已出库</el-tag>
          <el-tag type="danger" v-else>未出库</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="当前时间" prop="nowTime" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button style="width: 40%" size="small"  @click="updates(scope.row)">修改</el-button>
          <el-button style="width: 40%"  size="small"  @click="updates3(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="page"
          v-model:page-size="limit"
          :page-sizes="[1, 2, 3, 5,10]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
    </div>
    <el-dialog title="新增订单" :visible.sync="addDialogVisible" width="35%">
      <el-form
          ref="addFormRef"
          :model="addsaleOrder"
          status-icon
          label-width="100px"
          class="demo-ruleForm"
          style="padding-right: 25px;">
        <el-form-item label="销售订单号" prop="salesOrderId">
          <el-input v-model="addsaleOrder.salesOrderId"></el-input>
        </el-form-item>
        <el-form-item label="销售数量：" prop="salesOrderNum">
          <el-input v-model="addsaleOrder.salesOrderNum" />
        </el-form-item>
        <el-form-item label="总计价格：" prop="totalDetails">
          <el-input v-model.number="addsaleOrder.totalDetails" />
        </el-form-item>
        <el-form-item label="付款状态" prop="paymentState">
          <el-select v-model="addsaleOrder.paymentState" placeholder="付款状态">
            <el-option label="已付款" value="1"></el-option>
            <el-option label="未付款" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库状态" prop="deliveryStatus">
          <el-select v-model="addsaleOrder.deliveryStatus" placeholder="仓库状态">
            <el-option label="已出库" value="1"></el-option>
            <el-option label="未出库" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前时间" prop="nowTime">
          <el-date-picker v-model="addsaleOrder.nowTime"
                          format="yyyy-MM-DD"
                          value-format="yyyy-MM-DD"
                          type="date"
                          placeholder="请输入日期"
                          popper-class="select-popper2"
                          style="width:200px"/>
        </el-form-item>
        <el-form-item style="margin-top: 30px">
          <el-button type="primary" @click="inserts()"
          >确定</el-button
          >
          <el-button @click="addDialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="修改订单" :visible.sync="updatDialogVisible" width="35%"   center>
      <el-form ref="updateFormRef" :model="updatesaleOrder" status-icon label-width="100px" class="demo-ruleForm" style="padding-right: 25px;">
        <el-form-item label="销售订单号" prop="salesOrderId">
          <el-input v-model="updatesaleOrder.salesOrderId"></el-input>
        </el-form-item>
        <el-form-item label="销售数量：" prop="salesOrderNum">
          <el-input v-model="updatesaleOrder.salesOrderNum" />
        </el-form-item>
        <el-form-item label="总计价格：" prop="totalDetails">
          <el-input v-model.number="updatesaleOrder.totalDetails" />
        </el-form-item>
        <el-form-item label="付款状态" prop="paymentState">
          <el-select v-model="updatesaleOrder.paymentState" placeholder="付款状态">
            <el-option label="已付款" value="1"></el-option>
            <el-option label="未付款" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库状态" prop="deliveryStatus">
          <el-select v-model="updatesaleOrder.deliveryStatus" placeholder="仓库状态">
            <el-option label="已出库" value="1"></el-option>
            <el-option label="未出库" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当前时间" prop="nowTime">
          <el-date-picker v-model="updatesaleOrder.nowTime"
                          format="yyyy-MM-DD"
                          value-format="yyyy-MM-DD"
                          type="date"
                          placeholder="请输入日期"
                          popper-class="select-popper2"
                          style="width:200px"/>
        </el-form-item>
        <el-form-item style="margin-top: 30px">
          <el-button type="primary" @click="update()"
          >确定</el-button
          >
          <el-button @click="updatDialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--销售订单详情-->
    <el-dialog
        :visible.sysc="editDialogVisible1"
        title="销售订单详情"
        width="50%">
      <el-table :data="menuList1" @selection-change="handleSelectionChange" border style="width: 100%;text-align: center;font-weight: bold;margin-top: 40px;border-left: none">
        <el-table-column type="selection" width="55" />
        <el-table-column label="商品id" prop="productId" />
        <el-table-column label="单价" prop="price" />
        <el-table-column label="数量" prop="quantity" />
        <el-table-column label="总计价格" prop="totalDetails" />
        <el-table-column label="销售订单Id" prop="salesOrderId" />
      </el-table>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="editDialogVisible1 = false">取消</el-button>
           </span>
      </template>
    </el-dialog>
  </div>

</template>

<script>
import request from "@/netWork/request";

export default {
  name: "salesOrder",
  data(){
    return{
      //表格数据
      menuList:[],
      tableChecked:[],
      //详情数据
      menuList1:[],
      //分页背景
      background:true,
      salesOrderId: "",
      total: 0,
      disabled:false,
      //销售订单详情数据集合
      editDialogVisible1: false,
      //第几页 默认第一页
      page: 1,
      //一页显示多少 默认5
      limit: 5,
      multipleSelection:[],//多选的数据
      addDialogVisible: false,//新增弹框
      //新增的数据集合
      addsaleOrder: {
        salesOrderId: '', salesOrderNum: '', totalDetails: '',
        paymentState: '', deliveryStatus: '', nowTime: ''
      },
      updatDialogVisible: false,//修改弹框
      //修改的数据集合
      updatesaleOrder: {
        salesOrderId: '', salesOrderNum: '', totalDetails: '',
        paymentState: '', deliveryStatus: '', nowTime: ''
      },
      //大小
      small: false
    }
    },
  created() {
    this.getMenuList()
  },
  methods:{
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (limit) {
      this.limit = limit;
      request({
        url: 'selectSalesOrder',
        method: "get",
        // contentType: "application/x-www-form-urlencoded",
        params: {
          salesOrderId: this.salesOrderId,
          page: this.page,
          limit: this.limit
        }
      }, res => {
        this.total = res.data.count;
        this.menuList = res.data.data;
      }, err => {
        // eslint-disable-next-line no-console
        console.log(err);
      },8300)
    },
    handleCurrentChange: function (page) {
      this.page = page;
      request({
        url: 'selectSalesOrder',
        method: "get",
        // contentType: "application/x-www-form-urlencoded",
        params: {
          salesOrderId: this.salesOrderId,
          page: this.page,
          limit: this.limit
        }
      }, res => {
        // eslint-disable-next-line no-console
        console.log("集合大小" + res.data.data);
        this.total = res.data.count;
        this.menuList = res.data.data;
      }, err => {
        console.log(err);
      },8300)
      console.log("页数:" + this.page)  //点击第几页
    },
    // 获取表格数据
    async getMenuList() {
      request({
        url: 'selectSalesOrder',
        method: "get",
        // contentType: "application/json",
        params: {
          salesOrderId: this.salesOrderId,
          page: this.page,
          limit: this.limit
        }
      }, res => {
        this.total = res.data.count;
        this.menuList = res.data.data;
      }, err => {
        // eslint-disable-next-line no-console
        console.log(err);
      },8300)
    },
    //监听获得选中行数据
    handleSelectionChange(val){
      this.multipleSelection =val
    },
    //增加
    addsaleOrders() {
      this.addDialogVisible = true;
    },
    //增加表格
    inserts() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return
        request({
          url: '/insertSalesOrder',
          method: "post",
          params : this.addsaleOrder
        }, res => {
          console.log(res.data);
          if (res.data<=1){
            this.$message.success('添加订单信息成功')
            this.addDialogVisible=false;
            //刷新表格
            this.getMenuList()
          }else {
            this.$message.error('添加订单信息失败')
          }
        }, err => {
          console.log(err);
        },8300)
      })
    },
    //修改
    updates(row) {
      this.updatDialogVisible = true;
      this.updatesaleOrder = row;
    },
    //修改表格
    update() {
      this.$refs.updateFormRef.validate(valid => {
        if (valid) {
          if (!valid) return
          request({
            url: '/updateSalesOrder',
            method: "put",
            params: this.updatesaleOrder
          }, res => {
            console.log(res.data);
            if (res.data>=1) {
             this.$message.success("修改成功");
             this.updatDialogVisible=false
             this.getMenuList();
            } else {
              this.$message.success("修改失败");
            }
          }, err => {
            console.log(err);
          },8300)
        }
      })
    },
    //根据Id批量删除
    deleteChecked(val){
      //提示语
      this.$confirm('确定删除订单？', '提示', {
        confirmButtonText: '确定',
        cancleButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const length = this.multipleSelection.length;
        for (let i = 0; i < length; i++) {
          this.tableChecked.push(this.multipleSelection[i].salesOrderId)
        }
        let data= new Array(this.tableChecked)
        let salesOrderId="";
        data.forEach((id)=>{
              salesOrderId+=id
            }
        )
        request({
          url: '/deleteSalesOrder',
          method: "Delete",
          // contentType: "application/json",
          params: {salesOrderId:salesOrderId}
        }, res => {
          console.log("删除信息：" + res.data);
          if (res.data>=1) {
            this.getMenuList();
          } else {
            alert('删除失败')
          }
        }, err => {
          console.log(err);
        },8300)
      })
    },
    //销售订单详情
    updates3(row) {
      this.editDialogVisible1 = true;
      request({
        url:'orders',
        method: "get",
        // contentType: "application/json",
        params: {
          salesOrderId: row.salesOrderId,
        }
      }, res => {
        this.menuList1 = res.data.data;
      }, err => {
        // eslint-disable-next-line no-console
        console.log(err);
      },8300)
    },
    }
}
</script>
<style scoped>

</style>